<template>
  <div class="p-3">
    <a-card :bordered="false" style="height: 820px">
      <a-form :model="searchForm" ref="formRef" layout="inline">
        <a-form-item>
          <a-button type="primary"><RedoOutlined />刷新</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        class="mt-3"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'active'">
            <a-button type="primary">查看原因</a-button>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { RedoOutlined } from '@ant-design/icons-vue';
const searchForm = reactive({
  year: '',
  status: undefined,
  heatStatus: undefined,
  arrearsAmount: '',
  arrearsAmountEnd: '',
  valveType: undefined,
  payStatus: undefined,
});
const formRef = ref();
const columns = [
  {
    title: '项目',
    dataIndex: 'project',
    key: 'project',
  },
  {
    title: '小区名称',
    dataIndex: 'villageName',
    key: 'villageName',
  },
  {
    title: '文件名',
    dataIndex: 'userAddress',
    key: 'userAddress',
  },
  {
    title: '操作时间',
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title: '操作人',
    dataIndex: 'heatCardNum',
    key: 'heatCardNum',
  },
  {
    title: '结束时间',
    dataIndex: 'year',
    key: 'year',
  },
  {
    title: '状态',
    dataIndex: 'heatStatus',
    key: 'heatStatus',
  },
  {
    title: '操作',
    dataIndex: 'active',
    key: 'active',
  },
];
const dataSource = ref([]);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    // onSearch();
  },
});
</script>
<style scoped></style>
